<template>
  <div>
    <el-carousel :height="height + 'px'">
      <el-carousel-item v-for="item in bannerList" :key="item.id">
        <img :src="baseUrl+item.images" width="100%" height="100%" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import { banner } from "@/utils/home/index.js";
export default {
  data() {
    return {
      height: 640, // 轮播图高度
      baseUrl: process.env.VUE_APP_BASE_API,
      bannerList: [],
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.handleResize();
    window.addEventListener("resize", this.handleResize);
  },

  methods: {
    getList() {
      this.loading = true;
      let that = this 
      banner().then((response) => {
        that.bannerList = response.data
        that.loading = false;
      });
    },
    // 自适应banner图高度
    handleResize() {
      this.height = document.body.clientWidth / 3;
    },
  },
};
</script>

<style lang="scss" scoped></style>
